<script setup lang="ts">
import axios from "axios";
import {defineComponent,ref,reactive,watch,watchEffect,computed,toRef,toRefs } from "vue";

import Input from "./Input.vue";
import List from "./List.vue";

type listType =  {
    id:string,
    title:string
}[]

let list = reactive<listType>([])

//接数据时，不要把响应式proxy弄没了？？？？？？？？？？（应该如何接返回数据）
axios.post('/getTodolist').then((res)=>{
   list.push(...res.data.todolist)
//    list = list.concat(res.data.todolist)
   console.log(list)
}).catch(()=>{})


const HDinput = ref<any>(null)

let cx = ()=>{
    if(HDinput.value){
        HDinput.value.onSubmit()
    }
   
}

let ctsj = function(val:string):void{
    list.push({
        id:list.length+"",
        title:val
    })
}

let del = function(ind:number){
    list.splice(ind,1)
}

let del1 = function(ind:number){
    list.splice(ind,1)
}
</script>

<template>
    <Input ref="HDinput" @ctsj="ctsj"/>
    <!-- <button @click="cx">按钮</button> -->
    <List :list="list" @del="del" @del1="del1"/>
</template>

<style scoped>
</style>